<template>
  <div class="goosInfo">
    <div class="center">
      <NavInfo :fristTitle="fristTitle" :twoTitle="twoTitle"></NavInfo>
      <ul class="goods">
        <li class="goods-list" v-for="item in goods_info" :key="item.id">
          <div class="goods-img">
            <img class="img-big" :src="item.img" alt="商品信息">
          </div>
          <div class="buttom">
            <div class="buttom-list">家装设计整体效果图</div>
            <div class="buttom-price"><img class="goods-buttom-top-indoorimg" src="./img/indoor2x.png" alt="">室内商品总价：<span class="price">￥{{item.indoorPrice}}</span></div>
            <div class="buttom-price"><img class="goods-buttom-top-fitupimg" src="./img/fitup2x.png" alt="">装修总价：<span class="price">￥{{item.trimPrice}}</span></div>
          </div>
        </li>
      </ul>
      <div class="page">
        <div class="button-list firstPage">
          <button type="button">第一页</button>
        </div>
        <div class="button-list prevPage">
          <button type="button">上一页</button>
        </div>
        <div class="button-list nexttPage">
          <button type="button">下一页</button>
        </div>
        <div class="button-list lastPage">
          <button type="button">最末页</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import NavInfo from '../navInfo'

export default {
  name: "goosInfo",
  components: {
    NavInfo,
  },
  created() {
    this.fristTitle = this.$route.query.fristTitle
    this.twoTitle = this.$route.query.twoTitle
  },
  data() {
    return {
      fristTitle: '',
      twoTitle: '',
      goods_info: [
        { id: Math.random(), img: require("./img/img1.jpg"), title: "家装设计整体效果图", indoorPrice: 20020, trimPrice: 20000 },
        { id: Math.random(), img: require("./img/img2.jpg"), title: "家装设计整体效果图", indoorPrice: 20010, trimPrice: 20000 },
        { id: Math.random(), img: require("./img/img5.jpg"), title: "家装设计整体效果图", indoorPrice: 20200, trimPrice: 20100 },
        { id: Math.random(), img: require("./img/img4.jpg"), title: "家装设计整体效果图", indoorPrice: 20300, trimPrice: 20000 },
        { id: Math.random(), img: require("./img/img5.jpg"), title: "家装设计整体效果图", indoorPrice: 20400, trimPrice: 20000 },
        { id: Math.random(), img: require("./img/img3.jpg"), title: "家装设计整体效果图", indoorPrice: 20200, trimPrice: 20000 },
        { id: Math.random(), img: require("./img/img3.jpg"), title: "家装设计整体效果图", indoorPrice: 20200, trimPrice: 20000 },
        { id: Math.random(), img: require("./img/img3.jpg"), title: "家装设计整体效果图", indoorPrice: 20200, trimPrice: 20000 },
      ],
    }
  },
  watch: {
    $route(to) {
      this.fristTitle = to.query.fristTitle
      this.twoTitle = to.query.twoTitle
    }
  }
};
</script>

<style scoped lang="scss">
.goosInfo {
  .center {
    width: 84%;
    margin: 0 auto;
    .goods-buttom-top-fitupimg {
      width: 10px;
      height: 14px;
      margin-right: 4px;
      vertical-align: middle;
    }
    .goods-buttom-top-indoorimg {
      width: 10px;
      height: 14px;
      margin: 0 4px 2px 0;
      vertical-align: middle;
    }
    .goods {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      align-content: space-between;
      .goods-list {
        width: 24%;
        height: 340px;
        margin-bottom: 20px;
        border: 1px solid #E5E5E5;
        overflow:hidden;
        border-radius: 6px;
        transition: all .3s;
        cursor: pointer;
        .goods-img {
          height: 240px;
          min-height: 240px;
          .img-big {
            width: 100%;
            height: 100%;
          }
        }
        .price {
          color: $mate-color;
        }
        .buttom {
          padding: 10px 0 10px 10px;
          line-height: 26px;
        }
      }
      .goods-list:last-child:nth-child(4n + 2) {
        margin-right: calc((100% - 24%) / 3 * 2);
      }
      .goods-list:last-child:nth-child(4n + 3) {
        margin-right: calc((100% - 24%) / 3 * 1);
      }
      .goods-list:hover {
        box-shadow: 0px 3px 9px 0px #c1c1c1;
        border: 1px solid $mate-color;
      }
      .buttom-list {
        font-size: 15px;
      }
      .buttom-price {
        font-size: 15px;
        font-weight: bold;
      }
    }
    .page {
      display: flex;
      justify-content: center;
      margin: 40px 0 60px 0;
      .button-list {
        width: 60px;
        height: 24px;
        margin: 0 10px;
        button {
          width: 100%;
          height: 100%;
          cursor: pointer;
          border: 1px solid #DCDCDC;
          outline: none;
          background: #fff;
          transition: all .3s;
          border-radius: 4px;
          &:hover {
            box-shadow: 0px 3px 9px 0px #c1c1c1;
                border: 1px solid $mate-color;
          }
        }
      }
    }
  }
}
</style>
